<script setup lang="ts" name="PageDesignerHeader">
const props = defineProps({
  pageDesignerTitle: { type: String }
})
const title = toRef(props, 'pageDesignerTitle')
const emit = defineEmits(['clear', 'preview', 'save', 'close'])
</script>

<template>
  <div class="page-designer-header">
    <div class="left-wrap"></div>
    <div class="center-wrap">
      <h2>{{title}}</h2>
    </div>
    <div class="right-wrap">
      <el-tooltip content="清空">
        <el-button type="danger" link @click="emit('clear')">
          <svg-icon icon="ri:eraser-fill"></svg-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="预览">
        <el-button type="info" link @click="emit('preview')">
          <svg-icon icon="ep:view"></svg-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="保存">
        <el-button type="primary" link @click="emit('save')">
          <svg-icon icon="ri:save-line"></svg-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="关闭">
        <el-button type="info" link @click="emit('close')">
          <svg-icon icon="ri:close-line"></svg-icon>
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
